<template>
	<view class="content">
		<div class = "search">
			<div class="search-left">
				<u-icon name="search"></u-icon>
				<u-button text="推荐搜索关键字"></u-button>
			</div>
			<div class = "search-right">
				<u-icon name="server-fill"  size="28"></u-icon>
			</div>
		</div>
		<div class = 'banner'>
			<view class="uni-margin-wrap">
				<swiper class="swiper" autoplay circular> 
					<swiper-item v-for = '(item,index) in banner' :key = 'index'>
						<image :src = 'item.img' class = 'img'></image>
					</swiper-item>
				</swiper>
			</view>
		</div>
		<div class = 'hot'>
			<u-scroll-list>
				<view v-for="(item, index) in list" :key="index" class = 'item'>
					<image :src="item.thumb" class = 'img'></image>
				</view>
			</u-scroll-list>
		</div>
		<div class = 'floor'>
			<view v-for="(item, index) in floor" :key="index" class = 'item'>
				<image :src="item.thumb" class = 'img'></image>
			</view>
		</div>
		
	</view>
</template>

<script>
	import request from '@/api/request.js'
	export default {
		data() {
			return {
				 indicator: true,
				banner:[
					{
						"img":"http://gankai.gitee.io/vue-jd-h5/img/banner5.fb21a19b.jpg"
					},
					{
						"img":"http://gankai.gitee.io/vue-jd-h5/img/banner7.f187995a.jpg"
					},
					{
						"img":"http://gankai.gitee.io/vue-jd-h5/img/banner8.2b15b757.jpg"
					}
				],
				list: [
				{
					thumb: "http://gankai.gitee.io/vue-jd-h5/img/test11.d668d036.png"
				}, {
					thumb: "http://gankai.gitee.io/vue-jd-h5/img/test11.d668d036.png"
				}],
				floor:[
					{
						"img":"http://gankai.gitee.io/vue-jd-h5/img/%E7%BE%8E%E5%A6%86-1.50658bbb.png"
					},
					{
						"img":"http://gankai.gitee.io/vue-jd-h5/img/%E7%BE%8E%E5%A6%86-1.50658bbb.png"
					},
					{
						"img":"http://gankai.gitee.io/vue-jd-h5/img/%E7%BE%8E%E5%A6%86-1.50658bbb.png"
					},
					{
						"img":"http://gankai.gitee.io/vue-jd-h5/img/%E7%BE%8E%E5%A6%86-1.50658bbb.png"
					},
					{
						"img":"http://gankai.gitee.io/vue-jd-h5/img/%E7%BE%8E%E5%A6%86-1.50658bbb.png"
					},
					{
						"img":"http://gankai.gitee.io/vue-jd-h5/img/%E7%BE%8E%E5%A6%86-1.50658bbb.png"
					},
					{
						"img":"http://gankai.gitee.io/vue-jd-h5/img/%E7%BE%8E%E5%A6%86-1.50658bbb.png"
					},
					{
						"img":"http://gankai.gitee.io/vue-jd-h5/img/%E7%BE%8E%E5%A6%86-1.50658bbb.png"
					}
				]
			}
		},
		onLoad() {

		},
		methods: {
			async getBanner(){
				const {data} = await request({
					url:"http://127.0.0.1:3000"
				})
				console.log(data)
			}
		},
		created(){
			this.getBanner()
		}
	}
</script>

<style lang = 'scss'>
	.content{
		
		
		.search{
			position:fixed;
			left:0;
			top:20px;
			z-index:99;
			background:transparent;
			padding:0 10px;
			display: flex;
			.search-left{
				display: flex;
				flex:1;
				width:330px;
				background:#fff;
				
				.u-button{
					border:none;
				}
			}
			.search-right{
				flex-basis:24px;
				display: flex;
				justify-items: center;
				align-items: center;
				text-align: center;;
			}
		}
		.banner{
			.uni-margin-wrap{
				width:100vw;
				.swiper{
					width:100%;
					.img{
						width:100%;
						height:100%;
					}
				}
			}
		}
		.hot{
			margin-top:20px;
			.item{
				height:90px;
				margin-right:20px;
				
				.img{
					height:90px;
					border-radius: 10px;
				}
			}
		}
	}
</style>
